/*
 *  Copyright 2022 Collate.
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *  http://www.apache.org/licenses/LICENSE-2.0
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply tw-text-h1 tw-font-medium tw-mb-2;
  }
  h2 {
    @apply tw-text-h2 tw-font-medium tw-mb-2;
  }
  h3 {
    @apply tw-text-h3 tw-font-medium tw-mb-2;
  }
  h4 {
    @apply tw-text-h4 tw-font-medium tw-mb-2;
  }
  h5 {
    @apply tw-text-h5 tw-font-medium tw-mb-2;
  }
  h6 {
    @apply tw-text-h6 tw-font-medium tw-mb-2;
  }
  body {
    @apply tw-text-body tw-text-grey-body tw-font-normal;
  }

  /* utils */

  .tw-flex-center {
    @apply tw-flex tw-justify-center tw-items-center;
  }

  .tw-hw-full {
    @apply tw-w-full tw-h-full;
  }

  /* Table css start */
  .tableHead-row {
    @apply tw-leading-normal;
  }
  .tableHead-cell {
    @apply tw-py-2 tw-px-4 tw-font-medium tw-text-left tw-whitespace-nowrap;
  }
  .tableBody {
    @apply tw-text-grey-body;
  }
  .tableBody-row {
    @apply tw-border-t tw-border-main hover:tw-bg-body-hover;
  }
  .tableBody-cell {
    @apply tw-py-2 tw-px-4 tw-text-left;
  }
  /* Table css end */

  .tw-text-primary {
    @apply tw-text-blue-500;
  }
  .tw-gh-tabs-container {
    @apply tw-border-b tw-border-separator;
  }
  .tw-gh-tabs {
    @apply tw-text-grey-body tw-font-normal tw-pt-4 tw-pb-2 tw-px-6 tw-border-b-2 tw-border-transparent hover:tw-border-main focus:tw-outline-none;
  }
  .tw-gh-tabs.active {
    @apply tw-border-b-2 tw-border-primary tw-text-primary tw-font-medium;
  }
  .tw-gh-tabs:disabled {
    @apply tw-opacity-50 tw-pointer-events-none hover:tw-border-none;
  }

  .tw-signin-button {
    @apply tw-flex tw-items-center tw-justify-evenly tw-rounded-lg tw-bg-white tw-h-16 tw-w-80 tw-px-4 tw-font-medium;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
  }

  /* form */

  .tw-form-inputs {
    @apply tw-w-full tw-text-grey-body tw-rounded tw-border tw-border-main
    focus:tw-outline-none focus:tw-border-focus hover:tw-border-hover;
  }

  .tw-form-inputs-padding {
    @apply tw-px-2 tw-py-1;
  }

  .tw-form-inputs-bottom-border {
    @apply tw-w-full tw-text-grey-body tw-border-b tw-bg-body-main tw-border-main
    focus:tw-outline-none focus:tw-border-focus hover:tw-border-hover;
  }
  input:disabled {
    @apply tw-cursor-not-allowed;
  }

  .tw-form-container {
    @apply tw-bg-white tw-py-7 tw-px-5 tw-border tw-rounded-lg tw-shadow-form tw-w-700;
  }

  /* Dropdown CSS start */
  .dropdown-list {
    @apply tw-origin-top-right tw-absolute tw-z-9999
    tw-mt-2 tw-min-w-max tw-rounded-md tw-shadow-lg
    tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 focus:tw-outline-none;
  }

  .dropdown-list.dd-horz-left {
    @apply tw-left-0;
  }

  .dropdown-list.dd-horz-right {
    @apply tw-right-0;
  }
  /* Dropdown CSS end */

  .tw-heading {
    @apply tw-font-medium tw-text-grey-body tw-mb-4;
  }
  .tw-nav {
    @apply tw-font-normal tw-px-2;
  }

  .activeCategory .label-category {
    @apply tw-text-primary;
  }

  .custom-checkbox {
    @apply tw-form-checkbox tw-text-primary tw-rounded-sm tw-border tw-border-text hover:tw-border-primary focus:tw-border-primary;
  }
  .custom-checkbox:not(:checked):not(:disabled) {
    @apply hover:tw-bg-primary-lite;
  }
  .custom-checkbox:disabled {
    @apply tw-opacity-50;
  }
  .custom-checkbox:checked ~ .custom-checkbox-label {
    @apply tw-text-primary tw-font-normal;
  }

  .toggle-switch {
    @apply tw-border tw-cursor-pointer tw-flex tw-items-center tw-rounded-full
    tw-mx-2 tw-px-0.5 tw-transition tw-duration-500 tw-ease-in-out
    tw-bg-grey-muted-lite tw-border-grey-muted;
    width: 35px;
    height: 19px;
    border-width: 1.5px;
  }
  .toggle-switch.open {
    @apply tw-bg-primary-lite tw-border-primary;
  }
  .toggle-switch .switch {
    @apply tw-w-3 tw-h-3 tw-rounded-full tw-shadow-md tw-transform tw-transition tw-duration-500
    tw-ease-in-out tw-bg-grey-muted;
  }
  .toggle-switch.open .switch {
    @apply tw-bg-primary tw-translate-x-4;
  }

  .signup-box {
    @apply tw-m-auto tw-w-120 tw-bg-white tw-shadow-modal;
  }

  /* React flow */
  .leaf-node {
    @apply tw-border-main tw-py-1;
  }
  .leaf-node.core {
    @apply tw-border-primary tw-text-primary;
  }
  .leaf-node.selected,
  .leaf-node.selected:hover {
    @apply tw-border-main;
    box-shadow: 0 0 0 0.5px #e2dce4;
  }
  .leaf-node.selected,
  .leaf-node.selected:hover {
    @apply tw-border-primary-active;
    box-shadow: 0 0 0 0.5px #0079ff;
  }
  .tw-filter-seperator {
    @apply tw-mb-1;
    border-bottom: 1px solid #dce3ec80;
  }

  .centered-layout {
    @apply tw-max-w-screen-xxl xxl:tw-mx-auto xxl:tw-w-screen-xxl;
  }

  .rjsf.no-header #root__title,
  .rjsf.no-header #root__description,
  .rjsf .form-additional .control-label,
  .rjsf .panel.panel-danger.errors .panel-heading {
    @apply tw-hidden;
  }

  .rjsf .form-group.field {
    @apply tw-my-3;
  }

  .rjsf .additional-fields .form-group.field,
  .rjsf .array-fields .form-group.field {
    @apply tw-my-0;
  }

  .rjsf .property-wrapper.additional-fields ~ .button-comp {
    @apply tw-mt-1.5;
  }

  .rjsf .control-label {
    @apply tw-capitalize;
    line-height: 2;
  }
  .rjsf .control-label .required {
    @apply tw-text-red-600 tw-ml-0.5;
  }

  .rjsf .field-description {
    @apply tw-text-grey-muted tw-text-xs tw-my-0.5;
  }

  .rjsf .form-control {
    @apply tw-w-full tw-px-2 tw-py-1 tw-text-grey-body tw-rounded tw-border tw-border-main
    focus:tw-outline-none focus:tw-border-focus hover:tw-border-hover;
  }

  .rjsf .btn {
    @apply tw-align-bottom tw-inline-flex tw-items-center tw-justify-center tw-cursor-pointer tw-leading-5 
    tw-transition-colors tw-duration-150 tw-font-medium focus:tw-outline-none tw-rounded-lg 
    tw-text-sm tw-text-white tw-border tw-border-transparent;
  }

  .rjsf .btn.btn-block {
    @apply tw-w-full;
  }

  .rjsf .btn.array-item-remove {
    @apply tw-p-3.5;
    background: url()
      center center no-repeat;
    background-size: 50%;
  }

  .rjsf .row {
    @apply tw-flex tw-items-center tw-w-full tw--m-1.5;
  }

  .rjsf .col-xs-5 {
    @apply tw-flex-1 tw-p-1.5;
  }

  .rjsf .col-xs-2 {
    @apply tw-w-7 tw-p-1.5;
  }

  .rjsf .errors .list-group > .list-group-item {
    list-style-type: disc;
  }

  .rjsf .panel-danger.errors {
    @apply tw-mb-0 tw-mt-2;
  }

  .rjsf .list-group {
    @apply tw-px-5;
  }

  .rjsf .list-group-item {
    @apply tw-list-disc;
  }

  .rjsf .checkbox input[type='checkbox'] {
    @apply tw-mr-1;
  }

  @keyframes highlight {
    0% {
      @apply tw-bg-warning-lite;
    }
    100% {
      @apply tw-bg-white;
    }
  }

  /* react tostify */

  .Toastify__toast-container {
    @apply tw-font-sans;
    width: 450px;
    word-break: break-word;
  }

  .Toastify__toast {
    @apply tw-overflow-y-auto tw-max-h-80vh;
  }

  .Toastify__toast-body {
    @apply tw-items-start;
  }

  /* ToastUI Editor style */
  .ProseMirror .placeholder {
    @apply tw-text-grey-muted;
  }

  /* New Feed Button style */
  .tw-refreshButton {
    @apply tw-w-full tw-rounded tw-text-info tw-py-1 tw-bg-feed-background tw-border tw-border-feed hover:tw-bg-feed-hover;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 100ms linear;
  }

  .tw-table-container {
    @apply tw-bg-white tw-border tw-border-main tw-rounded;
  }
}
